<template>
  <div class="panel-left-container">
    <DataPanel
      class="panel-item-container"
      title="设备统计"
      :height="28"
      icon="/static/img/park/item/statistics.webp"
    >
      <chart-view
        class="statistics-chart"
        :chart-option="multipleRingOption"
        :auto-resize="true"
        height="100%"
      />
    </DataPanel>

    <DataPanel
      class="panel-item-container"
      title="设备管理"
      :height="40"
      icon="/static/img/park/item/administration.webp"
    >
      <EquipmentCard class="equipment-card" :data="equipmentList" />
    </DataPanel>

    <DataPanel
      class="panel-item-container"
      title="巡检维保"
      :height="32"
      icon="/static/img/park/item/maintenance.webp"
    >
      <chart-view
        class="statistics-chart"
        :chart-option="radarOption"
        :auto-resize="true"
        height="100%"
      />
    </DataPanel>
  </div>
</template>

<script>
import { multipleRingOptionHandler } from "./configs/multiple-ring.conf";
import { radarOptionHandler } from "./configs/radar.conf";
import DataPanel from "@/components/park/dataPanel.vue";
import ContentBlock from "@/components/ContentBlock/ContentBlock.vue";
import EquipmentCard from "../EquipmentCard/EquipmentCard.vue";

//#region 临时展示数据--START
import {
  generateEquipmentStateData,
  generateEquipmentData,
  generateMaintenanceData
} from "../../temp/data";
// #endregion 临时展示数据--END

export default {
  name: "LeftPanel",
  components: {
    DataPanel,
    ContentBlock,
    EquipmentCard
  },
  data() {
    return {
      // 设备统计相关数据
      overviewList: [],

      // 设备管理相关数据
      equipmentList: [],

      // 巡检维保相关数据
      maintenanceList: []
    };
  },

  computed: {
    multipleRingOption() {
      return multipleRingOptionHandler(this.overviewList);
    },

    radarOption() {
      return radarOptionHandler(this.maintenanceList);
    }
  },

  created() {
    // 获取相关数据方法
    this.getOverviewData();
    this.getEquipmentData();
    this.getMaintenanceData();
  },

  methods: {
    /**
     * radio group change 事件
     * @param {String|Number} key
     */
    radioGroupChangeEvent(key) {
      this.collectionSituationList = generateCollectionData(key);
    },

    /**
     * 获取情况概览数据方法
     */
    getOverviewData() {
      this.overviewList = generateEquipmentStateData();
    },

    /**
     * 获取设备数据方法
     */
    getEquipmentData() {
      this.equipmentList = generateEquipmentData();
    },

    /**
     * 获取巡检维保数据方法
     */
    getMaintenanceData() {
      this.maintenanceList = generateMaintenanceData();
    }
  }
};
</script>

<style lang="less" scoped>
.panel-left-container {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 100%;
  height: 100%;

  .panel-item-container {
    height: 100%;

    .equipment-card {
      margin-top: 0.625rem;
    }
  }
}
</style>
